<template>
  <div id="app" class='rootWrap'>    
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style lang='scss'>
// 公共css
html {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;  
  height:100%;  
}
body{
  height:100%;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
  margin:0;
  padding:0;  
}
div,ul,li,a,p,span,i,h1,h2,h3,header,section,footer,nav,aside,article{box-sizing: border-box;}
li{list-style: none;}
a{text-decoration: none;}
.rootWrap{height:100%;}
/*flex布局*/
.flex{display: flex;display: -webkit-flex;}
/*水平轴是主轴 垂直轴是交叉轴*/
/*单根主轴方向*/
.fd-r{flex-direction: row;}
.fd-rr{flex-direction: row-reverse;}
.fd-c{flex-direction: column;}
.fd-cr{flex-direction: column-reverse;}
/*单根换行*/
.fw-n{flex-wrap: nowrap;}
.fw-w{flex-wrap: wrap;}
.fw-wr{flex-wrap: wrap-reverse;}
/*单根主轴对齐方式*/
.jc-fs{justify-content: flex-start;}
.jc-fe{justify-content: flex-end;}
.jc-c{justify-content: center;}
.jc-sb{justify-content: space-between;}
.jc-sa{justify-content: space-around;}
/*单根交叉轴对齐方式*/
.ai-fs{align-items: flex-start;}
.ai-fe{align-items: flex-end;}
.ai-c{align-items: center;}
.ai-b{align-items: baseline;}
.ai-s{align-items: stretch;}
/*多根交叉轴对齐方式*/
/*父层配合fd-r,fw-w。子层配合width:100%。使用*/ 
.ac-fs{align-content: flex-start;}
.ac-fe{align-content: flex-end;}
.ac-c{align-content: center;}
.ac-sb{align-content: space-between;}
.ac-sa{align-content: space-around;}
.ac-s{align-content: stretch;} 
/*item属性*/
/*项目放大比例 默认0*/
.fg-1{flex-grow:1;}
.fg-2{flex-grow:2;}
.fg-3{flex-grow:3;}
.fg-4{flex-grow:4;}
.fg-5{flex-grow:5;}
/*项目缩小比例 默认1*/
.fs-0{flex-shrink:0;}
/*项目自动缩放*/
.f-a{flex: auto;}  
/*项目不缩放*/
.f-n{flex: none;}
</style>
